<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            cursor: pointer;
            border-radius: 15px;
            box-shadow: -1px 0px 10px 3px #a39d9d;
            position: absolute;
            top: 30%;
            left: 50%;
        }
        .box:active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    window.onload=function(){
       //开启box的拖拽
       var box=document.querySelector(".box");
       drag(box);
    }
    //提取1一个专门设置拖拽的函数
    //参数：开启拖拽的元素
     function drag(obj){
        obj.onmousedown=function(event){
            //2.这行代码的作用？
            event=event||window.event;
            //div的偏移量 鼠标.clientX-元素.offsetLeft
            //div的偏移量 鼠标.clientY-元素.offsetTop
            var ol=event.clientX-obj.offsetLeft;
            var ot=event.clientY-obj.offsetTop;

            //1.当鼠标在被拖拽元素上按下时，开始拖拽
        document.onmousemove=function(event){
            //设置box捕获所有鼠标按下的事件
            //setCapture可以将鼠标事件锁定在指定的元素上，当元素捕获了鼠标事件后，该事件只能作用在当前元素上。
            obj.setCapture && obj.setCapture();
            //2.当鼠标移动时被拖拽元素跟随鼠标移动
            event=event||window.event;
            var left=event.clientX-ol;
            var top=event.clientY-ot;
            if(left<0||top<0) return;
            let offW = document.documentElement.clientWidth - 200;
            let offH = document.documentElement.clientHeight - 200;
            console.log(left,top);
            if(offW<left||offH<top) return;
            obj.style.left=left+"px";
            obj.style.top=top+"px";
           } 
        
       //为元素绑定一个鼠标松开函数
        document.onmouseup=function(){
           // 3.当鼠标松开时，被拖拽元素固定在当前位置
           document.onmousemove=null;
           document.onmouseup=null;
           //当鼠标松开时取消捕获
           obj.releaseCapture && obj.releaseCapture();
        }
        //3.为什么要添加return false?
        return false;
        }
     }
</script>
</html>